<template>
    <div>
        <el-dialog title="添加管理员" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="用户名" :label-width="formLabelWidth" prop="userName">
                    <el-input v-model="form.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth" prop="turename">
                    <el-input v-model="form.turename" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="权限选择" prop="power">
                    <el-select v-model="form.power" placeholder="请选择管理员权限">
                        <el-option label="系统管理员" value="0"></el-option>
                        <el-option label="普通管理员" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sub">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { _addAdmin } from "../api/toos"
export default {
    data() {
        return {
            dialogFormVisible: false,
            form: {
                userName: '',
                turename: '',
                phone: '',
                password: '123456',
                power: '',
            },
            formLabelWidth: '80px',
            rules: {
                userName: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 110, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                turename: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur' },
                    {
                        patten: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/, message: "请正确输入十一位手机号码", trigger: "blur"
                    }
                ],
                power: [
                    { required: true, message: '请选择活动区域', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        sub() {
            this.$refs.form.validate(async vali => {
                if (vali) {
                    const res = await _addAdmin(this.form)
                    console.log(res)
                    if (res.data.success) {
                        this.$message.success("管理员添加成功！请等待服务器更新数据")
                        this.dialogFormVisible = false
                        // this.$router.replace("/layout/admin")
                        this.$forceUpdate()
                        this.$eventBus.$emit("force_update_admin")
                    }
                    if (res.data.error) {
                        this.$message.error("添加管理员失败！请按照要求输入管理员信息！")
                        this.dialogFormVisible = false
                    }
                }
            })

        }

    },
    mounted() {
        this.$eventBus.$on("open_addAdmin", (res) => {
            this.dialogFormVisible = res
        })
    },
    watch: {
        dialogFormVisible() {
            this.form = {
                userName: '',
                turename: '',
                phone: '',
                password: '123456',
                power: '',
            }
        }
    }
}
</script>

<style lang="scss" scoped></style>